iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
Modern Web

前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue系列 第 25

Day_25: 讓 Vite 來開啟你的Vue 之 讓肝變彩色的 給力 Vite & Vue 相關套件

  • 分享至 

  • xImage
  •  

Hi Dai Gei Ho~ 我是 Winnie ~

記得有一句話是這麼說的

肝 若不好 人生是黑白的,肝 若好 人生是彩色的。

所以為了讓我們可以少吃一顆保肝丸,在 今天的文章中,我們要來介紹關於 Vite & Vue 給力好用的兩款套件,至少人生 灰一點也比全黑好看, 首先來看看第一個:

子元件自動引入

unplugin-vue-components 套件 主要可以協助我們使用 子元件時,可以 省略元件定義 及 引入 的步驟 ,就可以直接在 模板(template) 來做使用。

有點繞口讓我們來看看 Before 與 after:

Before (原本):

 <script>
    <template>
      <div>
        <HelloWorld msg="Hello Vue 3.0 + Vite" /> //step3: 最後在 模板中使用
      </div>
    </template>

    <script>
    import HelloWorld from './src/components/HelloWorld.vue' //step1:一般使用都需要先import

    export default {
      name: 'App',
      components: {
        HelloWorld  //step2:再來定義元件
      }
    }
    </script>
 </script>

After(使用套件後):

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

是不是很方便!這可是當主管要求你的程式碼要縮減時,可以用的偷吃步XD

同時記得要在 Vite Config中 作設定喔,用法如下:

//vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite' //引入  unplugin-vue-components

export default defineConfig({
  plugins: [
    vue(),
    Components(), //在 plugins 中 定義 Components
  ],
})

指路連結: unplugin-vue-components

Icon 相關套件

接著是 關於 Icon 相關套件的介紹, unplugin-icons 提供很多常用免費的Icon可以用,而且不只限定使用Vue,同時也支援多種使用方式。

用法如下:

//vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import Icons from 'unplugin-icons/vite'//一樣先引入套件
import IconsResolver from 'unplugin-icons/resolver'

export default defineConfig({
plugins: [
  vue(),
  Components({
    resolvers: IconsResolver({
      prefix: 'icon'  // 可以為 icon component加上前贅字來區分元件
    }),
  }),
  Icons(),//一樣定義引入的套件
],
})

接著我們 可以到網站 icones來挑一個需要使用的 icon 直接引入到template中

以 banana icon為例(其實我想找芭樂XD)

複製 fxemoji:banana之後,接著引入 Vue 元件之中, 以自訂義元素的方式來撰寫,寫法如下:

<template>
   <button class="move-btn next">
     <icon-fxemoji-banana/> // 以連字號Hyphen 的方式來撰寫,前面的icon需要在config做設定
   </button> 
<template/>

我們將 原本 fxemoji:banana連字號Hyphen的方式來撰寫,就可以使用了。

預覽:

指路連結: unplugin-icons

以上就是 Vite & Vue 的相關套件的簡單使用介紹,另外想預告下,在接下幾篇文章 的主題 將會開始說說 自己在曾在Vue跌過的坑(碰到的問題)系列,以上謝謝大家。

--- 無聊小記事 ---

最近喜歡上了小時候很討厭的跳繩,反差的對比才讓我發現
原來 小時候的不喜歡可能不是真正的不喜歡
而長大的不喜歡也可能是真正的不喜歡..
但我相信 小時候的喜歡,到長大了依舊喜歡 就是真正的喜歡。

今天聽的是 小時候到現在一直都很喜歡的 五月天 溫柔..


上一篇
Day_24: 讓 Vite 來開啟你的Vue 之 VueUse
下一篇
Day_26: 讓 Vite 來開啟你的Vue之 跌入深坑_ 我該用 reactive 還是 ref
系列文
前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言